<template>
	<div>
		<div class="order-select">
			<p style="clear: both;">
				<span>订单号 : {{saleOrderViewVo.orderCode}}<i v-if="orderApplySpecial == 1" class="tejia">特价</i></span> <span style="margin-left: 20px;">{{saleOrderViewVo.memberBname}}【{{saleOrderViewVo.gradeName}}】</span>
			</p>
			<p style="clear: both;">
				<span>订单金额：{{orderTotalMoney.toFixed(2)}}</span>&nbsp;&nbsp;
				<span>已付款：{{orderPaidMoney.toFixed(2)}}</span>&nbsp;&nbsp;
				<span>待确认：{{orderConfirmMoney.toFixed(2)}}</span>&nbsp;&nbsp;
				<span>待支付：{{orderUnpaidMoney}}</span>
			</p>
			<div class="addSk" @click="vFun_shoukuanDivShow">
				添加收款记录
			</div>

		</div>
		<div class="shoukuan-table jiluu">
			<el-table :data="skTableData" style="width: 100%;" :max-height="440">
				<el-table-column prop="listCode" label="支付流水号" width="180"></el-table-column>
				<el-table-column prop="payDateStr" label="时间"></el-table-column>
				<el-table-column prop="money" label="付款金额"></el-table-column>
				<el-table-column prop="payTypeStr" label="支付方式"></el-table-column>
				<el-table-column prop="merchantSignNo" label="收款账户"></el-table-column>
				<el-table-column prop="dataBillstateStr" label="状态"></el-table-column>
				<el-table-column prop="" label="" fixed="right" width="60">
					<template scope="scope">
						<el-popover trigger="hover" placement="bottom">
							<p class="p" style="cursor: pointer;" @click="goTo(scope.$index, skTableData)">
								<em class="iconfont">&#xe656;</em>详情
							</p>
							<p class="p" v-if="scope.row.dataBillstate=='0' && scope.row.payType=='1'" @click="row_batchConfirm(scope.$index, skTableData)">
								<em class="iconfont" style="font-size: 17px">&#xe6f1;</em>收款确认
							</p>
							<p class="p" v-else-if="scope.row.dataBillstate=='1' && scope.row.payType=='1'" style="cursor: pointer;" @click="offlineDelete(scope.$index, skTableData)">
								<em class="iconfont">&#xe644;</em>作废
							</p>
							<p class="p" v-else-if="scope.row.dataBillstate=='0' && scope.row.payType=='0'" style="cursor: pointer;" @click="onlineDelete(scope.$index, skTableData)">
								<em class="iconfont">&#xe644;</em>作废
							</p>
							<div slot="reference" class="name-wrapper" style="text-align: center;">
								<em class="iconfont tab-hover">&#xe607;</em>
							</div>
						</el-popover>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				saleOrderViewVo: {}, // 订单对象
				orderTotalMoney: 0,
				orderPaidMoney: 0,
				orderConfirmMoney: 0,
				orderUnpaidMoney: 0,
				emit:{
					shoukuan:false,
					dateNow:null
				},
				shoukuan: false, //显示添加收款记录
				skTableData: [], //
				orderApplySpecial: '1', // 是否特价
			}
		},
		watch:{
			'deliveryState':function(val){
				//do something
				if(val==true){
					this.queryByPage();
					this.queryOrderAndFud();
					this.query_checkout();
					this.queryMerChantList();
				}
				
			}
		},
		mounted() {
			//查询订单和当前资金账户详情
			this.queryOrderAndFud();
			this.queryByPage();
			this.query_checkout();
		},
		methods: {
			vFun_shoukuanDivShow(){  //向父组件传值
				this.emit.shoukuan = true;
				this.emit.dateNow = Date.now();
				this.$emit('vue_shoukuan_boolean',this.emit);
			},
			//----------------查询订单和当前资金账户详情----------------------
			queryOrderAndFud() {
				this.axios({
					method: 'POST',
					url: "/v3/sale/orders/" + localStorage.getItem("orderCode") + "/queryOrderAndFud",
					data: {},
				}).then((res) => {
					this.orderApplySpecial = res.data.orderApplySpecial; //是否 特价
					this.orderTotalMoney = res.data.orderTotalMoney; //订单金额
					this.orderPaidMoney = res.data.orderPaidMoney; //已付款
					this.orderConfirmMoney = res.data.orderConfirmMoney; //待确认
					this.orderUnpaidMoney = res.data.orderUnpaidMoney.toFixed(2); //待支付
					this.queryMerChantList(localStorage.getItem("orderCode"));
				}).catch((err) => {
					this.Public.openError(this, err.response.data);
				});
			},
			//-----------------查询订单和当前资金账户详情---------------------
			queryByPage() {
				this.axios({
					method: 'GET',
					url: "/v3/sale/orders/" + localStorage.getItem("orderCode")
				}).then((res) => {
					var orderGoodsViewVoList = res.data.saleOrderGoodsDataList;
					this.saleOrderViewVo = res.data; // 订单详情
					this.saleOrderGoodsViewVoList = orderGoodsViewVoList; // 订单商品
					if(orderGoodsViewVoList != null && orderGoodsViewVoList != undefined) {
						var valuesum = 0;
						for(var i = 0; i < orderGoodsViewVoList.length; i++) {
							this.invalue += orderGoodsViewVoList[i].goodsBuyNum;
							valuesum += orderGoodsViewVoList[i].goodsBuyNum * orderGoodsViewVoList[i].goodsSalePrice;
						}
						this.valuesum = valuesum.toFixed(2);
					}
					//判断订单状态
					if(res.data.dataBillstate == "3") {
						this.tabxiang = true;
					} else {
						this.tabxiang = false;
					}
					//显示原有物流信息
					if(res.data.dataBillstate == "5" || res.data.dataBillstate == "6") {
						this.saleOrderViewVo.deliveryDate = res.data.deliveryDate;
					}
				}).catch((err) => {
					this.Public.openError(this, err.response.data);
				});
			},
			query_checkout() {
				this.axios({
					method: 'GET',
					url: "/v3/sale/orders/" + localStorage.getItem("orderCode"),
					data: {}
				}).then((res) => {
					this.saleOrderGoodsViewVoList2 = res.data.saleOrderGoodsDataList;
				}).catch((err) => {
					this.Public.openError(this, err.response.data);
				});
			},
			//---------------------------详情弹出层  start--------------------------

			goTo(index, data) {
				const h = this.$createElement;
				this.$msgbox({
					title: '订单付款',
					message: h('div', {
						style: 'padding:20px;'
					}, [
						h('p', {
							style: 'line-height:24px;'
						}, [
							h('span', {
								style: 'color:#96a6b6'
							}, '订单号： '),
							h('i', {
								style: 'color: #415161'
							}, data[index].fromCode )
						], ),
						h('p', {
							style: 'line-height:24px;'
						}, [
							h('span', {
								style: 'color:#96a6b6'
							}, '金额： '),
							h('i', {
								style: 'color: #415161'
							}, data[index].money)
						], ),
						h('p', {
							style: 'line-height:24px;'
						}, [
							h('span', {
								style: 'color:#96a6b6'
							}, '支付方式：'),
							h('i', {
								style: 'color: #415161'
							}, data[index].payTypeStr)
						], ),
						h('p', {
							style: 'margin-bottom: 30px;line-height:24px;'
						}, [
							h('span', {
								style: 'color:#96a6b6'
							}, '备注：'),
							h('i', {
								style: 'color: #415161'
							}, data[index].remark)
						], ),
						h('p', {
							style: 'line-height:24px;'
						}, [
							h('span', {
								style: 'color:#96a6b6'
							}, '流水号： '),
							h('i', {
								style: 'color: #415161;display: inline-block;width:175px'
							}, data[index].listCode),
							h('span', {
								style: 'color:#96a6b6'
							}, '日期： '),
							h('i', {
								style: 'color: #415161'
							}, data[index].payDateStr)
						], )
					], ),
					customClass: "dDFk",
					showCancelButton: true,
					confirmButtonText: '确定',
					showCancelButton: false
				}).then(action => {

				});
			},
			//----------------------线下收款记录作废----------------------------
			offlineDelete(index, data) {
				const h = this.$createElement;
				this.$msgbox({
					title: '确认',
					message: h('p', {
						style: 'text-align:center;padding:20px'
					}, [
						h('span', null, '是否作废该笔收款记录？ '),
					]),
					customClass: "Sktan",
					showCancelButton: true,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					cancelButtonClass: "fr",
					confirmButtonClass: "fr",
				}).then(action => {
					if(action == 'confirm') {
						this.axios({
							method: 'DELETE',
							url: "/v3/fund/merchantLists/" + data[index].listCode,
						}).then((res) => {
							this.queryMerChantList(data[index].fromCode);
							this.Public.openSuccess(this,"操作成功！")
						}).catch((err) => {
							this.Public.openError(this, err.response.data);
						});
					}
				}).catch(() => {
					//
				});
			},
			//----------------------线上收款记录作废----------------------------
			onlineDelete(index, data) {
				const h = this.$createElement;
				this.$msgbox({
					title: '确认',
					message: h('p', {
						style: 'text-align:center;padding:20px'
					}, [
						h('span', null, '是否作废该笔收款记录？ '),
					]),
					customClass: "Sktan",
					showCancelButton: true,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					cancelButtonClass: "fr",
					confirmButtonClass: "fr",
				}).then(action => {
					if(action == 'confirm') {
						this.axios({
							method: 'PATCH',
							url: "/v3/sale/orders/"+data[index].listCode+"/refund",
						}).then((res) => {
							this.queryMerChantList(data[index].fromCode);
							this.Public.openSuccess(this,"操作成功！")
						}).catch((err) => {
							this.Public.openError(this, err.response.data);
						});
					}
				}).catch(() => {
					//
				});
			},
			
			//-----------------批量审核  start---------------------------
			row_batchConfirm(index, data) {
				const h = this.$createElement;
				this.$confirm('确认收款确认？', '确认', {
					message: h('span', {
						style: 'padding:20px;'
					}, "确认收款确认?"),
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					cancelButtonClass: "fr",
					confirmButtonClass: "fr",
					customClass: "clearfixBox"
				}).then(() => {
					//点击确定的回调
					this.axios({
						method: "PATCH",
						url: "/v3/fund/merchantLists/" + data[index].listCode + "/batchConfirm",
						data: {}
					}).then((res) => {
						this.Public.openSuccess(this, "操作成功！");
						this.queryMerChantList(data[index].fromCode);
					}).catch((err) => {
						this.Public.openError(this, err.response.data)
					});
				}).catch((err) => {
					this.Public.openError(this, err.response.data)
				});
			},

			//收款记录列表
			queryMerChantList(orderCode) {
				this.axios({
					method: 'post',
					//url: "/v3/fund/merchantLists/listAll",
					url:"/v3/sale/orders/"+orderCode+"/queryFundListAndMerchantListByOrderCode"
				}).then((res) => {
					this.skTableData = res.data;
					console.log(res.data)
					for(var i = 0; i < this.skTableData.length; i++) {
						this.skTableData[i].money = this.skTableData[i].money.toFixed(2);
					}
				}).catch((err) => {
					this.Public.openError(this, err.response.data);
				});
			},
		},
	}
</script>

<style scoped>
	@import "../../../assets/css/zijin.css";
	.location {
		padding: 3px 0 15px 0;
	}

	.order {
		background: #fff;
		padding: 5px 20px;
		overflow-y: auto;
		font-family: "微软雅黑";
		position: relative;
	}

	.order-input-em2 {
		position: relative;
		right: 5px;
		top: 0px;
		cursor: pointer;
	}

	.order-tab {
		margin-top: 15px;
		border-left: 1px solid #e7e9f1;
	}

	.order-tab1 td {
		text-align: center;
		padding: 0px 0;
		border: 1px solid #e7e9f1;
		border-top: 0;
		border-left: 0;
		position: relative;
	}

	.order-tab1 td img {
		width: 45px;
		margin: 0 auto;
	}

	.order-tab1 .tab-th td {
		background: #eff1f8;
		padding: 14px 0;
	}

	.order-tab1 .order-input1 {
		height: 34px;
		width: 100px;
		border: 1px solid #cdd9e6;
		border-radius: 4px;
		text-indent: 5px;
	}

	.dorder-td td {
		padding: 15px 0;
	}

	.dorder-tend td {
		padding: 12px 15px;
		text-align: right;
	}

	.activedis {
		background: #eff1f8;
		cursor: no-drop;
	}

	.dorder-tend p span {
		display: inline-block;
		width: 120px;
	}

	.dorder-tend p:last-child span {
		color: #f33333;
		font-size: 20px;
	}

	.dorder-tend p {
		margin-top: 0px;
	}

	.order-xinxi {
		margin: 20px;
		margin-bottom: 50px;
	}

	.order-deta {
		position: relative;
		margin-top: 15px;
		clear: both;
		overflow: hidden;
	}

	.order-deta span {
		margin-right: 10px;
	}

	.order-deta a {
		display: inline-block;
		width: 80px;
		height: 30px;
		text-align: center;
		line-height: 31px;
		border-radius: 20px;
		border: 1px solid #cdd9e6;
		margin-top: 30px;
	}

	.order-deta a:first-child {
		background: rgb(19, 193, 159);
		color: #fff;
		border: 0;
		height: 32px;
		line-height: 32px;
	}

	.putongfp {
		margin-left: 62px;
	}

	.order-caozuo {
		position: absolute;
		top: 10px;
		right: 20px;
		z-index: 100;
		color: #7d91a5;
		margin-right: 20px;
	}

	.order-caozuo span {
		margin-left: 15px;
		cursor: pointer!important;
		display: inline-block;
	}

	.order-caozuo span a {
		color: #7d91a5;
	}

	.order-caozuo span a:hover {
		color: #13C19F;
	}

	.order-caozuo span em {
		position: relative;
		top: 2px;
	}

	.order-caozuo span:hover {
		color: #13C19F;
	}

	.order-select {
		overflow: hidden;
		position: relative;
	}

	.order-select h2 {
		color: #f96b6b;
		font-weight: normal;
		margin-top: 15px;
		float: left;
	}

	.order-select p {
		margin-top: 20px;
		float: left;
	}

	.order-select .select-span {
		margin-left: 20px;
	}

	.order-redio {
		float: right;
		margin-top: 20px;
	}

	.huise {
		color: #98a8b8;
		display: inline-block;
		margin-right: 20px;
		text-align: right;
	}

	.order-czrz {
		width: 100%;
		margin-top: 20px;
	}

	.order-czrz th {
		font-weight: normal;
		text-align: left;
		background: #eff1f8;
		border: 1px solid #cdd9e6;
		border-top: 0;
		border-left: 0;
		height: 40px;
		text-indent: 15px;
		font-size: 13px;
	}

	.order-czrz td {
		text-indent: 15px;
		height: 40px;
	}

	.bzstyle {
		border: 1px solid #cdd9e6;
		width: 375px;
		height: 150px;
		margin: 0 auto;
		border-radius: 3px;
	}

	.ckfhjl-top {
		padding: 20px 25px;
		background: #fff9ef;
		margin: 15px 0;
		overflow: hidden;
	}

	.ckfhjl-top-span {
		font-size: 18px;
		color: #f96b6b;
		font-weight: normal;
	}

	.ckfhjl-top p {
		line-height: 30px;
	}

	.ckfhjl-top span {
		margin-right: 20px;
	}

	.chuku-top {
		height: 31px;
		width: 150px;
		text-align: center;
		cursor: pointer;
		line-height: 29px;
		margin: 10px 0;
	}

	.chukuactive {
		border-bottom-right-radius: 20px;
		border-top-right-radius: 20px;
		background: #93a6b7;
		color: #fff;
	}

	.chuku-top em {
		position: relative;
		top: 1px;
	}

	.chuku-table {
		border: 1px solid #cdd9e6;
		position: relative;
	}

	.chuku-two {
		border-top: 1px solid #cdd9e6;
		text-align: right;
		padding: 15px;
	}

	.chuku-two span {
		margin-left: 15px;
	}

	.chuku-two span:hover {
		color: #13C19F;
		cursor: pointer;
	}

	.table-bottom {
		padding: 15px;
	}

	.table-bottom p {
		line-height: 22px;
	}

	.table-bottom span {
		color: #98a8b8;
		display: inline-block;
		width: 70px;
	}

	.shoukuan-table {
		margin-top: 20px;
		border-left: 1px solid rgb(223, 234, 236);
	}

	.addSk {
		position: absolute;
		width: 100px;
		height: 32px;
		line-height: 32px;
		color: #fff;
		background: #13C19F;
		border-radius: 20px;
		text-align: center;
		right: 0;
		bottom: 0px;
		cursor: pointer;
	}

	.tejia {
		color: #fff;
		background: #FF0000;
		margin-left: 3px;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: .4s;
	}

	.fade-enter,
	.fade-leave-active {
		opacity: 0;
	}

	.slideDown-enter-active,
	.slideDown-leave-active {
		transition: .4s;
	}

	.add {
		position: absolute;
		padding: 10px 20px 20px 20px;
		z-index: 100;
		background: #fff;
		width: 100%;
		box-shadow: 0px 0px 5px #666;
		top: 0;
		left: 0;
		box-sizing: border-box;
	}

	.Fblock {
		margin-top: 20px;
		margin-left: 20px;
		margin-bottom: 22px;
	}

	.Fblock .demonstration {
		margin-right: 8px;
	}

	.search-btn {
		margin-top: 20px;
		clear: both;
	}

	.el-date-editor.el-input {
		width: 320px;
	}

	.wuliB {
		float: left;
		width: 480px;
		margin-top: 18px;
	}

	.wuliB .el-textarea__inner {
		height: 100px;
	}

	.el-col-11 {
		width: 300px;
	}

	.el-select {
		width: 300px;
	}

	.daizhifu {
		box-sizing: border-box;
		margin-left: 25px;
		padding: 15px;
		background: #f8f9fd;
		margin-top: 20px;
	}

	.daizhifu p {
		border-bottom: 1px solid #cdd9e6;
		line-height: 35px;
		margin-bottom: 5px;
	}

	.daizhifu>span {
		font-size: 22px;
		color: #f96b6b;
	}

	.daizhifu>span span {
		position: relative;
		top: 3px;
		margin-left: 5px;
	}

	.daizhifu i span {
		margin: 0 10px;
	}

	.el-date-editor.el-input {
		width: 180px;
	}

	.upload-demo {
		margin-left: 100px;
	}

	.caozuoqizhi {
		cursor: pointer;
	}

	.caozuoqizhi em {
		font-size: 12px;
		margin-left: 2px;
		display: inline-block;
	}

	.activEm {
		-webkit-transform: rotateX(180deg);
		transform: rotateX(180deg);
	}

	.p:hover {
		background: #EEF1F9;
		color: #03b8cc;
	}

	.p {
		text-indent: 10px;
	}

	.benciCk input {
		height: 34px;
		width: 80px;
		border: 1px solid #cdd9e6;
		border-radius: 4px;
		text-indent: 5px;
		margin-right: 3px;
	}

	.order-select p {
		margin-right: 20px;
	}

	.chuku-em {
		top: -1px!important;
	}

	.chuku-two-a {
		display: inline-block;
		height: 32px;
		color: #FFF;
		background: #13C19F;
		width: 80px;
		text-align: center;
		line-height: 32px;
		border-radius: 20px;
	}

	.add h3 {
		font-size: 16px;
		font-weight: normal;
	}

	.name-wrapper img {
		width: 42px;
		margin: 0 auto;
	}

	.outpass {
		display: inline-block;
		width: 80px;
		box-sizing: border-box;
		height: 32px;
		line-height: 32px;
		text-align: center;
		background: #13C19F;
		color: #fff;
		border-radius: 20px;
	}

	.order-caozuo .outpass:hover {
		color: #fff;
	}
</style>
